<template>
  <div>
    <el-radio-group id="group"
                    v-model="type"
                    style="margin-bottom: 30px;">
      <el-radio-button label=0>全部</el-radio-button>
      <el-radio-button label=5>用户</el-radio-button>
      <el-radio-button label=4>商家</el-radio-button>
      <el-radio-button label=3>物管</el-radio-button>
      <el-radio-button label=2>平台</el-radio-button>
      <el-radio-button label=-1>其他</el-radio-button>
    </el-radio-group>

    <el-table id="table"
              :data="tableData"
              stripe
              style="width: 100%">
      <el-table-column prop="id"
                       label="用户id"
                       width="220px"
                       align="center">
      </el-table-column>
      <el-table-column prop="account"
                       label="用户名"
                       width="280px"
                       align="center">
      </el-table-column>
      <el-table-column prop="role"
                       label="用户分类"
                       width="280px"
                       align="center">
      </el-table-column>
      <el-table-column prop="info"
                       label="用户信息"
                       width="280px"
                       align="center">
        <!-- 作用域插槽 -->
        <template slot-scope="tdimage">
          <el-button type="primary"
                     plain
                     @click="info(tdimage)">信息</el-button>
        </template>
      </el-table-column>
      <el-table-column prop="status"
                       label="启用/停用"
                       width="280px"
                       align="center">
        <!-- 作用域插槽 -->
        <template slot-scope="td">
          <el-switch v-model="td.row.status"
                     @change="switchChange(td.row)"
                     active-text="开启"
                     inactive-text="禁用"></el-switch>
        </template>
      </el-table-column>
    </el-table>

    <!-- 信息框 -->
    <el-dialog title="用户信息"
               :visible.sync="dialogVisible"
               width="60%">
      <detail :user="currentUser"
              v-if="refresh"
              @closedialog="updateData"></detail>
      <span slot="footer"
            class="dialog-footer">
      </span>
    </el-dialog>

    <!-- 分页标签 -->
    <el-pagination background
                   id="page"
                   layout="prev, pager, next"
                   :total="total"
                   :page-size="pagesize"
                   :current-page.sync="currentPage"
                   @prev-click="prevClick"
                   @next-click="nextClick"
                   @current-change="currentChange">
    </el-pagination>
  </div>
</template>

<script>
import Detail from './detail'
import axios from '../../../axios_config'
import Commons from '../../../js/commons'


export default {
  components: {
    Detail
  },

  data () {
    let tableData = new Array();
    return {
      type: 0,
      tableData: tableData,
      total: 0,
      pagesize: 0,
      currentPage: 1,
      dialogVisible: false, //控制对话框是否显示
      currentUser: {},    //指向当前被选中的teacher信息
      refresh: true,        //强制刷新子组件
    }
  },
  mounted () {
    //这个属性就可以，在里面声明初始化时要调用的方法即可
    axios.get("http://192.168.11.18:8080/user/usersInfo?type=" + this.type + "&size=6&currentPage=1").then(res => {
      for (let i = 0; i < res.data.data.data.length; i++) {
        res.data.data.data[i].status = !res.data.data.data[i].status;
      }
      this.tableData = res.data.data.data;
      this.total = res.data.data.total;
      this.pagesize = res.data.data.pageSize;
      this.currentPage = res.data.data.currentPage;
    })
  },
  watch: {
    type (val) {
      //监听type变化
      axios.get("http://192.168.11.18:8080/user/usersInfo?type=" + this.type + "&size=6&currentPage=1").then(res => {
        for (let i = 0; i < res.data.data.data.length; i++) {
          res.data.data.data[i].status = !res.data.data.data[i].status;
        }
        this.tableData = res.data.data.data;
        this.total = res.data.data.total;
        this.pagesize = res.data.data.pageSize;
        this.currentPage = res.data.data.currentPage;
      })
    },

  },
  methods: {
    switchChange (row) {
      let status = 1;
      if (row.status) {
        status = 0;
      } else {
        status = 1;
      }
      axios.post("http://192.168.11.18:8080/user/userSwitch", { id: row.id, status: status }).then(res => {
        if (res.data.state != "SUCCESS") {
          alert(res.data.message);
          row.status = !row.status;
        }
      })
    },
    prevClick () {
      //上一页按钮
      this.currentPage = this.currentPage - 1;
    },
    nextClick () {
      //下一页按钮
      this.currentPage = this.currentPage + 1;
    },
    currentChange () {
      //当前页变化时
      axios.get("http://192.168.11.18:8080/user/usersInfo?type=" + this.type + "&size=6&currentPage=" + this.currentPage).then(res => {
        for (let i = 0; i < res.data.data.data.length; i++) {
          res.data.data.data[i].status = !res.data.data.data[i].status;
        }
        this.tableData = res.data.data.data;
        this.total = res.data.data.total;
        this.pagesize = res.data.data.pageSize;
        this.currentPage = res.data.data.currentPage;
      })
    },
    info (tdimage) {
      //强制刷新
      this.refresh = false;
      this.$nextTick(() => {
        this.refresh = true;
      });
      this.currentUser = tdimage.row;
      this.dialogVisible = true;
    },
    updateData (data) {
      //关闭对话框
      this.dialogVisible = false;
      //更新数据
      if (data.result) {
        //数据更新  将新数据展示在对应的位置
        for (let i = 0; i < this.tableData.length; i++) {
          let user = this.tableData[i];
          if (user.id == data.data.id) {
            //this.tableData[i] = data.data;  替换对象不会自动刷新
            //最好是直接属性赋值
            user.account = data.data.account;
            user.role = data.data.role;
            user.email = data.data.email;
            user.userHouseDtoList = data.data.userHouseDtoList;
            //发送请求修改后台数据......
            break;
          }
        }
      }
    },
  }
}
</script>
<style scoped>
#table {
  margin-bottom: 2%;
}
#group {
  margin-top: 2%;
}
#page {
  /* position: fixed;
  top: 90%; */
}
</style>